<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#add_class").click(function(){
			$("h1,h2,p").addClass("blue");
			$("div").addClass("important");
		});
		$("#remove_class").click(function(){
			$("h1,h2,p").removeClass("blue");
			$("div").removeClass("important");
		});
		$("#toggle_class").click(function(){
			$("h1,h2,p").toggleClass("blue");
			$("div").toggleClass("important");
		});
	});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
<title>CSS Class</title>
</head>
<body>
<h1>Title 1</h1>
<h2>Title 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<div>This is very important text.</div>
<br/>
<button id="add_class">Add class to elements</button>
<button id="remove_class">Remove class from elements</button>
<button id="toggle_class">Toggle class of elements</button>
</body>
</html>